<!DOCTYPE html>
<html class="wide wow-animation" lang="zh-CN">
  <head>
    <title>Meet活动聚</title>
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Poppins:300,400,500">
    <link rel="stylesheet" href="/static/css/index_css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/index_css/fonts.css">
    <link rel="stylesheet" href="/static/css/index_css/style.css">

      <style>
          /* 自定义样式 */
      .rd-navbar-brand {
        display: flex;
        align-items: center;
      }

      .brand-text {
        font-family: 'Comic Sans MS', sans-serif;
        font-weight: 500;
        font-size: 34px;
        color: #333;
        margin-left: 12px;
        letter-spacing: 1px;
      }

      {#左右箭头#}
       .swiper-button-prev,
.swiper-button-next {
    background: none; /* 移除默认背景 */
    width: 50px; /* 设置按钮区域大小 */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-button-prev img,
.swiper-button-next img {
    width: 100%; /* 图片自适应按钮大小 */
    height: auto;
}

/* 调整位置 */
.swiper-button-prev {
    left: 10px;
}

.swiper-button-next {
    right: 10px;
}

/* 如果需要悬停效果 */
.swiper-button-prev:hover img,
.swiper-button-next:hover img {
    opacity: 0.8;
}
      </style>
  </head>
  <body>
    <!-- 页面加载器 -->
    <div class="preloader">
      <div class="preloader-body">
        <div class="cssload-container"><span></span><span></span><span></span><span></span>
        </div>
      </div>
    </div>

    <div class="page">
      <!-- 页面头部 -->
      <!-- 页面头部 -->
        <header class="section page-header">
    <!-- 导航栏 -->
    <div class="rd-navbar-wrap rd-navbar-modern-wrap">
        <nav class="rd-navbar rd-navbar-modern" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed"
             data-md-layout="rd-navbar-fixed" data-md-device-layout="rd-navbar-fixed"
             data-lg-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-fixed"
             data-xl-layout="rd-navbar-static" data-xl-device-layout="rd-navbar-static"
             data-xxl-layout="rd-navbar-static" data-xxl-device-layout="rd-navbar-static"
             data-lg-stick-up-offset="46px" data-xl-stick-up-offset="46px"
             data-xxl-stick-up-offset="70px" data-lg-stick-up="true"
             data-xl-stick-up="true" data-xxl-stick-up="true">
            <div class="rd-navbar-main-outer">
                <div class="rd-navbar-main">
                    <!-- 导航栏面板 -->
                    <div class="rd-navbar-panel">
                        <!-- 导航栏切换按钮 -->
                        <button class="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap">
                            <span></span>
                        </button>
                        <a href="{% url 'home' %}" style="text-decoration: none; /* 消除链接下划线 */">
                            <div class="rd-navbar-brand">
                                <!-- Logo SVG -->
                                <svg style="border-radius: 50%;background-color: #ffffff;" width="80px" height="80px" viewBox="0 0 256 146" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
                                  <title>Baseline</title>
                                  <g>
                                    <polygon fill="#99DBB1" points="182.918378 35.0449089 220.954789 73.0813201 183.345088 110.691626 159.83978 87.1857136 142.316872 104.707413 165.823389 128.213325 183.345088 145.736232 256 73.0813201 238.477092 55.5596211 200.440681 17.5226056"></polygon>
                                    <polygon fill="#99DBB3" points="72.6546102 3.43564427e-14 17.0952913 55.5593189 34.6175947 73.0816223 72.6546102 35.0446067 96.1605224 58.5505189 113.682826 41.02882 90.1769136 17.5229078"></polygon>
                                    <polygon fill="#008F32" points="73.0816223 110.691324 17.5229078 55.1320046 3.43564427e-14 72.654308 73.0816223 145.73593 90.1766114 128.640941 90.6045301 128.213627 200.867935 17.9496177 183.345632 0.427314287"></polygon>
                                  </g>
                                </svg>
                                <!-- 标题 -->
                                <span class="brand-text">Meet</span> <!-- 原a标签改为span，避免嵌套链接 -->
                            </div>
                        </a>
                    </div>

                    <div class="rd-navbar-main-element">
                        <div class="rd-navbar-nav-wrap">
                            <!-- 主导航菜单 -->
                            <ul class="rd-navbar-nav">
                                <li class="rd-nav-item active">
                                    <a class="rd-nav-link" href="{% url 'home' %}">首页</a>
                                </li>
                                <li class="rd-nav-item">
                                    <a class="rd-nav-link" href="{% url 'activities:activity_list' %}">活动列表</a>
                                </li>
                                <li class="rd-nav-item">
                                    <a class="rd-nav-link" href="{% url 'activities:activity_create' %}">创建活动</a>
                                </li>
                                <li class="rd-nav-item">
                                    <a class="rd-nav-link" href="{% url 'points:rewards_shop' %}">积分商城</a>
                                </li>
                            </ul>
                        </div>

                        <!-- 用户菜单区域 -->
                        <div class="rd-navbar-project-hamburger" data-multitoggle=".rd-navbar-main"
                             data-multitoggle-blur=".rd-navbar-wrap" data-multitoggle-isolate>
                            <div class="project-hamburger">
                                <span class="project-hamburger-arrow-top"></span>
                                <span class="project-hamburger-arrow-center"></span>
                                <span class="project-hamburger-arrow-bottom"></span>
                            </div>
                            <div class="project-hamburger-2">
                                <span class="project-hamburger-arrow"></span>
                                <span class="project-hamburger-arrow"></span>
                                <span class="project-hamburger-arrow"></span>
                            </div>
                            <div class="project-close"><span></span><span></span></div>
                        </div>
                    </div>

                    <!-- 用户侧边栏信息 -->
                    <div class="rd-navbar-project rd-navbar-modern-project">
                        <div class="rd-navbar-project-modern-header">
                            <h4 class="rd-navbar-project-modern-title">
                                {% if user.is_authenticated %}
                                    {{ user.nickname|default:user.username }} 的中心
                                {% else %}
                                    用户中心
                                {% endif %}
                            </h4>
                            <div class="rd-navbar-project-hamburger" data-multitoggle=".rd-navbar-main"
                                 data-multitoggle-blur=".rd-navbar-wrap" data-multitoggle-isolate>
                                <div class="project-close"><span></span><span></span></div>
                            </div>
                        </div>
                        <div class="rd-navbar-project-content rd-navbar-modern-project-content">
                            <div>
                                {% if user.is_authenticated %}
                                    <ul class="rd-navbar-modern-contacts">
                                        <li>
                                            <a class="link" href="{% url 'points:points_home' %}">
                                                <i class="bi bi-coin"></i> 我的积分
                                            </a>
                                        </li>
                                        <li>
                                            <a class="link" href="{% url 'social:chat_main' %}">
                                                <i class="bi bi-envelope"></i> 消息中心
                                                <span id="nav-unread-badge" class="badge rounded-pill bg-danger"
                                                      style="display: none; font-size: 0.6rem; margin-left: 5px;">
                                                    0
                                                </span>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="link" href="{% url 'users:profile' %}">
                                                <i class="bi bi-person-circle"></i> 个人中心
                                            </a>
                                        </li>
                                        <li>
                                            <a class="link" href="{% url 'users:my_activities' %}">
                                                <i class="bi bi-list-ul"></i> 我的活动
                                            </a>
                                        </li>
                                        <li>
                                            <a class="link" href="{% url 'users:my_registrations' %}">
                                                <i class="bi bi-check2-all"></i> 我的报名
                                            </a>
                                        </li>
                                        {% if user.is_admin_user %}
                                        <li>
                                            <a class="link" href="/dashboard/">
                                                <i class="bi bi-gear"></i> 管理后台
                                            </a>
                                        </li>
                                        {% endif %}
                                        <li>
                                            <a class="link" href="{% url 'users:logout' %}">
                                                <i class="bi bi-box-arrow-right"></i> 退出登录
                                            </a>
                                        </li>
                                    </ul>
                                {% else %}
                                    <div class="text-center mb-4">
                                        <p>请登录以获取更好的体验</p>
                                        <a class="button button-primary" href="{% url 'users:login' %}">
                                            <i class="bi bi-box-arrow-in-right"></i> 登录
                                        </a>
                                        <a class="button button-secondary" href="{% url 'users:register' %}">
                                            <i class="bi bi-person-plus"></i> 注册
                                        </a>
                                    </div>
                                {% endif %}

                                <!-- 社交媒体链接 -->
                                <ul class="list-inline rd-navbar-modern-list-social mt-4">
                                    <li><a class="icon fa fa-facebook" href="#"></a></li>
                                    <li><a class="icon fa fa-twitter" href="#"></a></li>
                                    <li><a class="icon fa fa-google-plus" href="#"></a></li>
                                    <li><a class="icon fa fa-instagram" href="#"></a></li>
                                    <li><a class="icon fa fa-pinterest" href="#"></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</header>

      <!-- 轮播图滑块 -->
      <section class="section swiper-container swiper-slider swiper-slider-modern" data-loop="true" data-autoplay="5000" data-simulate-touch="true" data-nav="true" data-slide-effect="fade">
        <div class="swiper-wrapper text-left">
          <!-- 轮播图1 -->
          <div class="swiper-slide context-dark" data-slide-bg="/static/imgs/index_img/lun003.png">
            <div class="swiper-slide-caption">
              <div class="container">
                <div class="row justify-content-center justify-content-xxl-start">
                  <div class="col-md-10 col-xxl-6">
                    <div class="slider-modern-box">
                      <h1 class="slider-modern-title"><span data-caption-animate="slideInDown" data-caption-delay="0">activity</span></h1>
                      <p data-caption-animate="fadeInRight" data-caption-delay="400">在这里，每个周末都不再单调，每个夜晚都充满可能。从深度文化沙龙到热血运动赛事，
                          从亲子欢乐时光到职场技能提升，我们精心筛选全城最优质活动，让你的业余时间变得更有价值。</p>
                      <div class="oh button-wrap"><a class="button button-primary button-ujarak" href="{% url 'activities:activity_list' %}" data-caption-animate="slideInLeft" data-caption-delay="400">了解更多</a></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 轮播图2 -->
          <div class="swiper-slide context-dark" data-slide-bg="/static/imgs/index_img/lun002.png">
            <div class="swiper-slide-caption">
              <div class="container">
                <div class="row justify-content-center justify-content-xxl-start">
                  <div class="col-md-10 col-xxl-6">
                    <div class="slider-modern-box">
                      <h1 class="slider-modern-title"><span data-caption-animate="slideInLeft" data-caption-delay="0">community</span></h1>
                      <p data-caption-animate="fadeInRight" data-caption-delay="400">从文艺沙龙到运动健身，从亲子互动到职场提升，这里都有</p>
                      <div class="oh button-wrap"><a class="button button-primary button-ujarak" href="{% url 'activities:activity_list' %}" data-caption-animate="slideInLeft" data-caption-delay="400">了解更多</a></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 轮播图3 -->
          <div class="swiper-slide" data-slide-bg="/static/imgs/index_img/lun005.png">
            <div class="swiper-slide-caption">
              <div class="container">
                <div class="row justify-content-center justify-content-xxl-start">
                  <div class="col-md-10 col-xxl-6">
                    <div class="slider-modern-box"  style="color: white">
                      <h1 class="slider-modern-title"><span data-caption-animate="slideInUp" data-caption-delay="0" style="color: white">friendly</span></h1>
                      <p data-caption-animate="fadeInRight" data-caption-delay="400">这周末不知道去哪？我发现了一个超棒的活动！🎉</p>
                      <div class="oh button-wrap"><a class="button button-primary button-ujarak" href="{% url 'activities:activity_list' %}" data-caption-animate="slideInUp" data-caption-delay="400">了解更多</a></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>


          <!-- 轮播图导航按钮 -->
        <div class="swiper-button-prev">
            <img src="/static/imgs/index_img/左双箭头.png" alt="上一张">
        </div>
        <div class="swiper-button-next">
            <img src="/static/imgs/index_img/右双箭头.png" alt="下一张">
        </div>

        <!-- 轮播图分页指示器 -->
        <div class="swiper-pagination swiper-pagination-style-2"></div>
      </section>

      <!-- 特色服务区域 -->
      <section class="section section-md bg-default section-top-image">
        <div class="container">
          <div class="row row-30 justify-content-center">
            <!-- 特色1 -->
            <div class="col-sm-6 col-lg-3 wow fadeInRight" data-wow-delay="0s">
              <article class="box-icon-ruby">
                <div class="unit box-icon-ruby-body flex-column flex-md-row text-md-left flex-lg-column align-items-center text-lg-center flex-xl-row text-xl-left">
{#                  <div class="unit-left">#}
{#                    <div class="box-icon-ruby-icon linearicons-leaf"></div>#}
{#                  </div>#}
                  <div class="unit-body">
                    <h4 class="box-icon-ruby-title"><a href="{% url 'activities:activity_list' %}">丰富活动<br>more activities</a></h4>
                  </div>
                </div>
              </article>
            </div>

            <!-- 特色2 -->
            <div class="col-sm-6 col-lg-3 wow fadeInRight" data-wow-delay=".1s">
              <article class="box-icon-ruby">
                <div class="unit box-icon-ruby-body flex-column flex-md-row text-md-left flex-lg-column align-items-center text-lg-center flex-xl-row text-xl-left">
                  <div class="unit-body">
                    <h4 class="box-icon-ruby-title"><a href={% url 'social:chat_main' %}>社交互动<br>Community interaction</a></h4>
                  </div>
                </div>
              </article>
            </div>

            <!-- 特色3 -->
            <div class="col-sm-6 col-lg-3 wow fadeInRight" data-wow-delay=".2s">
              <article class="box-icon-ruby">
                <div class="unit box-icon-ruby-body flex-column flex-md-row text-md-left flex-lg-column align-items-center text-lg-center flex-xl-row text-xl-left">
                  <div class="unit-body">
                    <h4 class="box-icon-ruby-title"><a href="{% url 'points:rewards_shop' %}">积分奖励<br>Bonus Points</a></h4>
                  </div>
                </div>
              </article>
            </div>
              <div class="col-sm-6 col-lg-3 wow fadeInRight" data-wow-delay=".1s">
              <article class="box-icon-ruby">
                <div class="unit box-icon-ruby-body flex-column flex-md-row text-md-left flex-lg-column align-items-center text-lg-center flex-xl-row text-xl-left">
                  <div class="unit-body">
                    <h4 class="box-icon-ruby-title"><a href={% url 'activities:nearby_activities_page' %}>附近活动<br>Nearby Events</a></h4>
                  </div>
                </div>
              </article>
            </div>
          </div>
        </div>
      </section>

      <!-- 热门产品区域 -->
      <section class="section section-md bg-default">
        <div class="container">
          <div class="row row-40 justify-content-center">
            <!-- 左侧产品横幅 -->
            <div class="col-sm-8 col-md-7 col-lg-6 wow fadeInLeft" data-wow-delay="0s">
              <div class="product-banner"><img src="/static/imgs/001.jpeg" alt="" style="width: 570px;height: 650px;"/>
                <div class="product-banner-content">
                  <div class="product-banner-inner">
                    <h3 class="text-secondary-1">活动activity</h3>
                    <h2 class="text-primary">聚</h2>
                  </div>
                </div>
              </div>
            </div>

            <!-- 右侧产品网格 -->
            <div class="col-md-5 col-lg-6">
              <div class="row row-30 justify-content-center">
                <!-- 产品1 -->
                <div class="col-sm-6 col-md-12 col-lg-6">
                  <div class="oh-desktop">
                    <article class="product product-2 box-ordered-item wow slideInRight" data-wow-delay="0s">
                      <div class="unit flex-row flex-lg-column">
                        <div class="unit-left">
                          <div class="product-figure"><img src="/static/imgs/index_img/act006.png" alt="" style="width: 270px;height: 280px;" width="270" height="280"/>
                            <div class="product-button"><a class="button button-md button-white button-ujarak" href="{% url 'activities:activity_list' %}">浏览活动</a></div>
                          </div>
                        </div>
                        <div class="unit-body">
                          <h6 class="product-title"><a href="#">摄影</a></h6>
                          <div class="product-price-wrap">
                          </div><a class="button button-sm button-secondary button-ujarak" href="#">浏览活动</a>
                        </div>
                      </div>
                    </article>
                  </div>
                </div>

                <!-- 产品2 -->
                <div class="col-sm-6 col-md-12 col-lg-6">
                  <div class="oh-desktop">
                    <article class="product product-2 box-ordered-item wow slideInLeft" data-wow-delay="0s">
                      <div class="unit flex-row flex-lg-column">
                        <div class="unit-left">
                          <div class="product-figure"><img src="/static/imgs/index_img/act007.png" alt="" style="width: 270px;height: 280px;" width="270" height="280"/>
                            <div class="product-button"><a class="button button-md button-white button-ujarak" href="{% url 'activities:activity_list' %}">浏览活动</a></div>
                          </div>
                        </div>
                        <div class="unit-body">
                          <h6 class="product-title"><a href="#">采摘</a></h6>
                          <div class="product-price-wrap">
                          </div><a class="button button-sm button-secondary button-ujarak" href="#">浏览活动</a>
                        </div>
                      </div>
                    </article>
                  </div>
                </div>

                <!-- 产品3 -->
                <div class="col-sm-6 col-md-12 col-lg-6">
                  <div class="oh-desktop">
                    <article class="product product-2 box-ordered-item wow slideInLeft" data-wow-delay="0s">
                      <div class="unit flex-row flex-lg-column">
                        <div class="unit-left">
                          <div class="product-figure"><img src="/static/imgs/index_img/act008.png" alt="" style="width: 270px;height: 280px;" width="270" height="280"/>
                            <div class="product-button"><a class="button button-md button-white button-ujarak" href="{% url 'activities:activity_list' %}">浏览活动</a></div>
                          </div>
                        </div>
                        <div class="unit-body">
                          <h6 class="product-title"><a href="#">美食</a></h6>
                          <div class="product-price-wrap">
                          </div><a class="button button-sm button-secondary button-ujarak" href="#">浏览活动</a>
                        </div>
                      </div>
                    </article>
                  </div>
                </div>

                <!-- 产品4 -->
                <div class="col-sm-6 col-md-12 col-lg-6">
                  <div class="oh-desktop">
                    <article class="product product-2 box-ordered-item wow slideInRight" data-wow-delay="0s">
                      <div class="unit flex-row flex-lg-column">
                        <div class="unit-left">
                          <div class="product-figure"><img src="/static/imgs/index_img/act009.png" alt="" style="width: 270px;height: 280px;" width="270" height="280"/>
                            <div class="product-button"><a class="button button-md button-white button-ujarak" href="{% url 'activities:activity_list' %}">浏览活动</a></div>
                          </div>
                        </div>
                        <div class="unit-body">
                          <h6 class="product-title"><a href="#">滑雪</a></h6>
                          <div class="product-price-wrap">
                          </div><a class="button button-sm button-secondary button-ujarak" href="#">浏览活动</a>
                        </div>
                      </div>
                    </article>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 行动号召区域 -->
      <section class="section text-center">
        <div class="parallax-container" data-parallax-img="/static/imgs/003.png">
          <div class="parallax-content section-xl section-inset-custom-1 context-dark bg-overlay-40">
            <div class="container">
              <h3 class="oh font-weight-normal"><span class="d-inline-block wow slideInDown" data-wow-delay="0s">我们的理念</span></h3>
              <p class="oh big text-width-large"><span class="d-inline-block wow slideInUp" data-wow-delay=".2s">"汇聚全城优质活动，一键发现你的兴趣所在"</span></p>
              <a class="button button-primary button-icon button-icon-left button-ujarak wow fadeInUp" href="https://www.youtube.com/watch?v=-AhmuMqZB0s" data-lightgallery="item" data-wow-delay=".1s">
                <span class="icon mdi mdi-play"></span>
                  <img src="/static/imgs/index_img/播放.png" width="30px" style="margin-left: -20px;margin-right: 8px;"/>观看介绍视频
              </a>
            </div>
          </div>
        </div>
      </section>

      <!-- 团队介绍区域 -->
      <section class="section section-md bg-default">
        <div class="container">
          <div class="oh">
            <h2 class="wow slideInUp" data-wow-delay="0s">Activity Examples</h2>
          </div>
        </div>
      </section>

      <!-- 数据统计区域 -->
      <section class="section">
        <div class="parallax-container" data-parallax-img="/static/imgs/004.png">
          <div class="parallax-content section-xl context-dark bg-overlay-68">
            <div class="container">
              <div class="row row-lg row-50 justify-content-center border-classic border-classic-big">
                <!-- 统计1 -->
                <div class="col-sm-6 col-md-5 col-lg-3 wow fadeInLeft" data-wow-delay="0s">
                  <div class="counter-creative">
                    <div class="counter-creative-number">
                      <span class="counter">12</span>
                      <img src="/static/imgs/index_img/jiangbei.png" class="counter-creative-img" style="width: 70px;margin-top:-12px;margin-left: -19px;">
                    </div>
                    <h6 class="counter-creative-title">奖项荣誉</h6>
                  </div>
                </div>

                <!-- 统计2 -->
                <div class="col-sm-6 col-md-5 col-lg-3 wow fadeInLeft" data-wow-delay=".1s">
                  <div class="counter-creative">
                    <div class="counter-creative-number">
                      <span class="counter">2</span>
                      <span class="symbol">k</span>
                        <img src="/static/imgs/index_img/activitiescategory.png" class="counter-creative-img" style="width: 65px;margin-top:-8px;margin-left: -19px;">
                    </div>
                    <h6 class="counter-creative-title">产品种类</h6>
                  </div>
                </div>

                <!-- 统计3 -->
                <div class="col-sm-6 col-md-5 col-lg-3 wow fadeInLeft" data-wow-delay=".2s">
                  <div class="counter-creative">
                    <div class="counter-creative-number">
                      <span class="counter">679</span>
                        <img src="/static/imgs/index_img/taiyang.png" class="counter-creative-img" style="width: 70px;margin-top:-11px;margin-left: -19px;">
                    </div>
                    <h6 class="counter-creative-title">满意客户</h6>
                  </div>
                </div>

                <!-- 统计4 -->
                <div class="col-sm-6 col-md-5 col-lg-3 wow fadeInLeft" data-wow-delay=".3s">
                  <div class="counter-creative">
                    <div class="counter-creative-number">
                      <span class="counter">13</span>
                        <img src="/static/imgs/index_img/chuangshiren.png" class="counter-creative-img" style="width: 55px;margin-top:-2px;margin-left: -19px;">
                    </div>
                    <h6 class="counter-creative-title">专业活动创始人</h6>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 产品图库区域 -->
      <section class="section section-md bg-default section-top-image">
        <div class="container">
          <div class="oh h2-title">
            <h3 class="wow slideInUp" data-wow-delay="0s">活动图库</h3>
          </div>
          <div class="row row-30" data-lightgallery="group">
            <!-- 图库项目1 -->
            <div class="col-sm-6 col-lg-4">
              <div class="oh-desktop">
                <article class="thumbnail thumbnail-mary thumbnail-sm wow slideInLeft" data-wow-delay="0s">
                  <div class="thumbnail-mary-figure"><img src="/static/imgs/index_img/act001.png" alt="" style="display: inline-block;width: 370px;height: 303px;" /></div>
                  <div class="thumbnail-mary-caption">
                    <h4 class="thumbnail-mary-title"><a href="#">室外活动</a></h4>
                  </div>
                </article>
              </div>
            </div>

            <!-- 图库项目2 -->
            <div class="col-sm-6 col-lg-4">
              <div class="oh-desktop">
                <article class="thumbnail thumbnail-mary thumbnail-sm wow slideInUp" data-wow-delay=".1s">
                  <div class="thumbnail-mary-figure"><img src="/static/imgs/index_img/act002.png" alt="" style="display: inline-block;width: 370px;height: 303px;" /></div>
                  <div class="thumbnail-mary-caption">
                    <h4 class="thumbnail-mary-title"><a href="#">摄影</a></h4>
                  </div>
                </article>
              </div>
            </div>

            <!-- 图库项目3 -->
            <div class="col-sm-6 col-lg-4">
              <div class="oh-desktop">
                <article class="thumbnail thumbnail-mary thumbnail-sm wow slideInRight" data-wow-delay=".0s">
                  <div class="thumbnail-mary-figure"><img src="/static/imgs/index_img/act004.png" alt="" style="display: inline-block;width: 370px;height: 303px;" /></div>
                  <div class="thumbnail-mary-caption">
                    <h4 class="thumbnail-mary-title"><a href="#">爬山</a></h4>
                  </div>
                </article>
              </div>
            </div>

            <!-- 图库项目4 -->
            <div class="col-sm-6 col-lg-4">
              <div class="oh-desktop">
                <article class="thumbnail thumbnail-mary thumbnail-sm wow slideInUp" data-wow-delay=".1s">
                  <div class="thumbnail-mary-figure"><img src="/static/imgs/index_img/act005.png" alt="" style="display: inline-block;width: 370px;height: 303px;" /></div>
                  <div class="thumbnail-mary-caption">
                    <h4 class="thumbnail-mary-title"><a href="#">美食鉴赏</a></h4>
                  </div>
                </article>
              </div>
            </div>

            <!-- 图库项目5 -->
            <div class="col-sm-6 col-lg-4">
              <div class="oh-desktop">
                <article class="thumbnail thumbnail-mary thumbnail-sm wow slideInLeft" data-wow-delay="0s">
                  <div class="thumbnail-mary-figure"><img src="/static/imgs/index_img/act006.png" alt="" style="display: inline-block;width: 370px;height: 303px;" /></div>
                  <div class="thumbnail-mary-caption">
                    <h4 class="thumbnail-mary-title"><a href="#">观察自然</a></h4>
                  </div>
                </article>
              </div>
            </div>

            <!-- 图库项目6 -->
            <div class="col-sm-6 col-lg-4">
              <div class="oh-desktop">
                <article class="thumbnail thumbnail-mary thumbnail-sm wow slideInDown" data-wow-delay=".1s">
                  <div class="thumbnail-mary-figure"><img src="/static/imgs/index_img/act003.png" alt="" style="display: inline-block;width: 370px;height: 303px;" /></div>
                  <div class="thumbnail-mary-caption">
                    <h4 class="thumbnail-mary-title"><a href="#">旅游</a></h4>
                  </div>
                </article>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 页面页脚 -->
      <footer class="section footer-variant-2 footer-modern context-dark section-top-image section-top-image-dark">
        <div class="footer-variant-2-content">
          <div class="container">
            <div class="row row-40 justify-content-between">
              <!-- 公司信息 -->
              <div class="col-sm-6 col-lg-4 col-xl-3">
                <div class="oh-desktop">
                  <div class="wow slideInRight" data-wow-delay="0s">
                    <div class="footer-brand">
                        <a href={% url 'home' %}>
                            <svg style="" width="80px" height="50px" viewBox="0 0 256 146" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
                                  <title>Baseline</title>
                                  <g>
                                    <polygon fill="#99DBB1" points="182.918378 35.0449089 220.954789 73.0813201 183.345088 110.691626 159.83978 87.1857136 142.316872 104.707413 165.823389 128.213325 183.345088 145.736232 256 73.0813201 238.477092 55.5596211 200.440681 17.5226056"></polygon>
                                    <polygon fill="#99DBB3" points="72.6546102 3.43564427e-14 17.0952913 55.5593189 34.6175947 73.0816223 72.6546102 35.0446067 96.1605224 58.5505189 113.682826 41.02882 90.1769136 17.5229078"></polygon>
                                    <polygon fill="#008F32" points="73.0816223 110.691324 17.5229078 55.1320046 3.43564427e-14 72.654308 73.0816223 145.73593 90.1766114 128.640941 90.6045301 128.213627 200.867935 17.9496177 183.345632 0.427314287"></polygon>
                                  </g>
                                </svg>
                            <h5 style="color: #529046">Meet 活动聚 Meet</h5>
                        </a>
                    </div>
                    <p>这周末不知道去哪？我发现了一个超棒的活动！🎉</p>
                    <ul class="footer-contacts d-inline-block d-md-block">
                      <li>
                        <div class="unit unit-spacing-xs">
                          <div class="unit-left"><span class="icon fa fa-phone"></span></div>
                          <div class="unit-body"><a class="link-phone" href="tel:#">+1 323-913-4688</a></div>
                        </div>
                      </li>
                      <li>
                        <div class="unit unit-spacing-xs">
                          <div class="unit-left"><span class="icon fa fa-clock-o"></span></div>
                          <div class="unit-body">
                            <p>周一至周六: 07:00 - 17:00</p>
                          </div>
                        </div>
                      </li>
                      <li>
                        <div class="unit unit-spacing-xs">
                          <div class="unit-left"><span class="icon fa fa-location-arrow"></span></div>
                          <div class="unit-body"><a class="link-location" href="#">4730 Crystal Springs Dr, Los Angeles, CA 90027</a></div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>

              <!-- 新闻通讯 -->
              <div class="col-sm-6 col-lg-4 col-xl-4">
                <div class="oh-desktop">
                  <div class="inset-top-18 wow slideInDown" data-wow-delay="0s">
                    <h5>新闻通讯</h5>
                    <p>订阅我们的电子邮件通讯，获取最新资讯和提示。</p>
                    <form class="rd-form rd-mailform" data-form-output="form-output-global" data-form-type="subscribe" method="post" action="bat/rd-mailform.php">
                      <div class="form-wrap">
                        <input class="form-input" id="subscribe-form-5-email" type="email" name="email" data-constraints="@Email @Required">
                        <label class="form-label" for="subscribe-form-5-email">输入您的电子邮箱</label>
                      </div>
                      <button class="button button-block button-white" type="submit">订阅</button>
                    </form>
                    <div class="group-lg group-middle">
                      <p class="text-white">关注我们</p>
                      <div>
                        <ul class="list-inline list-inline-sm footer-social-list-2">
                          <li><a class="icon fa fa-facebook" href="#"></a></li>
                          <li><a class="icon fa fa-twitter" href="#"></a></li>
                          <li><a class="icon fa fa-google-plus" href="#"></a></li>
                          <li><a class="icon fa fa-instagram" href="#"></a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 页脚图库 -->
              <div class="col-lg-3 col-xl-3">
                <div class="oh-desktop">
                  <div class="inset-top-18 wow slideInLeft" data-wow-delay="0s">
                    <h5>图库</h5>
                    <div class="row row-10 gutters-10" data-lightgallery="group">
                      <!-- 小图1 -->
                      <div class="col-6 col-sm-3 col-lg-6">
                        <article class="thumbnail thumbnail-mary">
                          <div class="thumbnail-mary-figure"><img src="/static/imgs/index_img/act001.png" alt="" style="display: inline-block;width:129px; height:120px;"/></div>
                        </article>
                      </div>

                      <!-- 小图2 -->
                      <div class="col-6 col-sm-3 col-lg-6">
                        <article class="thumbnail thumbnail-mary">
                          <div class="thumbnail-mary-figure"><img src="/static/imgs/index_img/act002.png" alt="" style="display: inline-block;width:129px; height:120px;"/></div>
                        </article>
                      </div>

                      <!-- 小图3 -->
                      <div class="col-6 col-sm-3 col-lg-6">
                        <article class="thumbnail thumbnail-mary">
                          <div class="thumbnail-mary-figure"><img src="/static/imgs/index_img/act003.png" alt="" style="height: 120px;width: 129px;"/></div>
                        </article>
                      </div>

                      <!-- 小图4 -->
                      <div class="col-6 col-sm-3 col-lg-6">
                        <article class="thumbnail thumbnail-mary">
                          <div class="thumbnail-mary-figure"><img src="/static/imgs/index_img/act004.png" alt="" style="height: 120px;width: 129px;"/></div>
                        </article>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>

    <!-- 全局邮件表单输出 -->
    <div class="snackbars" id="form-output-global"></div>

    <!-- JavaScript文件 -->
    <script src="/static/js/index_js/core.min.js"></script>
    <script src="/static/js/index_js/script.js"></script>
    <!-- 由Ragnar编写 -->
  </body>
</html>